<template>
  <div>
    <el-card shadow="never" class="mb20">
      <user-form class="mb10" ref="userForm" @add="handleAdd" @search="handleSearch" />
    </el-card>
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span=" showPanel ? 19 : 24">
          <user-table
            ref="userTable"
            @setRole="handleSetRole"
            @edit="handleEdit"
            @selectChange="handleSelectChange"
          />
        </el-col>
        <el-col :span="5" v-show="showPanel">
          <user-role ref="userRole" @refresh="handleRefresh" @changeShowPanel="showPanel = false" />
        </el-col>
      </el-row>
      <user-modal ref="userModal" @refresh="handleRefresh" />
    </el-card>
  </div>
</template>

<script>
import UserForm from './userForm.vue'
import UserTable from './userTable.vue'
import UserModal from './userModal.vue'
import UserRole from './userRole'

export default {
  name: 'UserIndex',
  components: {
    UserForm,
    UserTable,
    UserModal,
    UserRole
  },
  data() {
    return {
      disableBtn: true,
      showPanel: false
    }
  },
  methods: {
    onChange(value) {
      console.log(value)
    },
    // 设置角色点击
    handleSetRole(row) {
      console.log('index row', row)
      this.showPanel = true
      this.$refs.userRole.receiveOneRole(row)
    },
    // 表格刷新
    handleRefresh() {
      this.$refs.userTable.handleGetList()
    },
    // 搜索
    handleSearch(queryParam) {
      this.$refs.userTable.handleGetList(queryParam)
    },
    // 编辑
    handleEdit(row) {
      this.$refs.userModal.edit(true, row)
    },
    // 新增
    handleAdd() {
      this.$refs.userModal.edit(false, {})
    },
    handleSelectChange(selectedRowKeys, selectedRows) {
      if (selectedRows.length > 0) {
        this.disableBtn = false
      } else {
        this.disableBtn = true
      }
    }
  }
}
</script>

<style scoped>
.el-card.mb20 {
  overflow: inherit;
}
</style>
